<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>设置支付密码</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/setting-payment-password.css" />
    <link rel="stylesheet" type="text/css" href="../css/passwordkeyboard.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />

    <style>
        body {
            background-color: white;
        }

        ul,
        li {
            list-style: none;
        }

        .password-div input {
            width: 1px;
            height: 1px;
            opacity: 0;
            border: 0;
        }

        .password-lable {
            height: 30px;
            clear: both;
        }

        .password-lable li {
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #dedede;
            margin-left: -1px;
            /*background: greenyellow;*/
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="password-div">
            <label for="password" class="password-lable">
      <ul id="www">
        <li class="aa"></li>
        <li class="aa"></li>
        <li class="aa"></li>
        <li class="aa"></li>
        <li class="aa"></li>
        <li class="aa"></li>
      </ul>
      <!--<input id="password"  type="number" name="password" maxlength="6">-->
      <input id="password"  onkeyup="OnInput (event)" oninput="if(value.length>6)value=value.slice(0,6)" type="number" name="password" maxlength="6">
    </label>
        </div>

        <div class="finish" tapmode onclick="mine_2()"><button>完 成</button></div>
    </div>

    <!--<div id="keyboardDIV"></div>-->
</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/fastclick.js"></script>
<script type="text/javascript">
    headInner({
        title: "",
        //headleft
        headl: '<a href="javascript:history.back(-1)" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })
    function OnInput(event) {
      var number = 6; //定义输入最大值
      var pw = document.getElementById("password").value; //定义pw为name是password的input框的输入值
      var list = document.getElementsByClassName("aa"); //定义list是li
      for(var i = 0; i < number; i++) { //for循环遍历将·放入li标签
        if(pw[i]) {
          list[i].innerText =pw[i];
        } else {
          list[i].innerText = " ";
        };
      };
      }
</script>

</html>
